<template>
  <div class="box">
    <div class="color1">123</div>
    <div class="color2">456</div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.info.toUpperCase() }}</h3>
    <h4>{{ age > 18 ? '老芽儿' : '小丫儿' }}</h4>
    <a :href="url">百度一下，你就知道</a>
    <input type="text" :value="msg1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      msg: '今天天气雾蒙蒙啊了',
      url: 'https://www.baidu.com',
      msg1: '黑马202教室',
      obj: {
        name: '传智教育',
        info: 'hello world!',
      },
    }
  },
}
</script>
<style lang="less">
.box {
  .color1 {
    color: red;
    font-size: 50px;
  }
  .color2 {
    color: green;
    font-size: 60px;
  }
}
</style>
